<template>
  <div class="circle-chart-component">
    <div class="pie-item" v-if="circleData[0]"
      :style="{ background: `conic-gradient(#ff67a8 0%,transparent ${circleData[0]}%)` }"></div>

    <div class="pie-item" v-if="circleData[1]"
      :style="{ background: `conic-gradient(#6eec9b 0%,transparent ${circleData[1]}%)`, transform: `rotate(${(rotateData[0] / 100) * 360}deg)` }">
    </div>

    <div class="pie-item" v-if="circleData[2]"
      :style="{ background: `conic-gradient(#f97b7b 0%,transparent ${circleData[2]}%)`, transform: `rotate(${(rotateData[1] / 100) * 360}deg)` }">
    </div>

    <div class="pie-item" v-if="circleData[3]"
      :style="{ background: `conic-gradient(#4ae4f0 0%,transparent ${circleData[3]}%)`, transform: `rotate(${(rotateData[2] / 100) * 360}deg)` }">
    </div>

    <div class="pie-item" v-if="circleData[4]"
      :style="{ background: `conic-gradient(#f4aa6a 0%,transparent ${circleData[4]}%)`, transform: `rotate(${(rotateData[2] / 100) * 360}deg)` }">
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps(['data'])

const circleData = ref([0, 0, 0, 0, 0])
const rotateData = ref([0, 0, 0, 0])

const total = computed(() => {
  return props.data?.reduce((prev = 0, curr) => prev + curr) || 0
})

watch(() => props.data, (newVal) => {
  console.log(newVal, 111);
  if (newVal.length > 0) {
    circleData.value = [
      Math.ceil((newVal[0] / total.value) * 100) || 0,
      Math.ceil((newVal[1] / total.value) * 100) || 0,
      Math.ceil((newVal[2] / total.value) * 100) || 0,
      Math.ceil((newVal[3] / total.value) * 100) || 0,
      Math.ceil((newVal[4] / total.value) * 100) || 0
    ]

    const num1 = Math.ceil((newVal[0] / total.value) * 100) || 0
    const num2 = num1 + (Math.ceil((newVal[1] / total.value) * 100) || 0)
    const num3 = num2 + (Math.ceil((newVal[1] / total.value) * 100) || 0)
    const num4 = num3 + (Math.ceil((newVal[1] / total.value) * 100) || 0)
    rotateData.value = [num1, num2, num3, num4]
    console.log(total.value, num1, 2222);
  }
},
  { deep: true, immediate: true }
)
</script>

<style scoped>
.circle-chart-component-box {
  position: relative;
  /* #ff67a8: #ff67a8; */
  /* #6eec9b: #6eec9b; */
  /* #f97b7b: #f97b7b; */
  /* #4ae4f0: #4ae4f0; */
  /* #f4aa6a: #f4aa6a */
}

.pie-item {
  position: absolute;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  mask: radial-gradient(transparent,
      transparent 47px,
      #000 48px,
      #000 48px,
      #000 100%)
}

.pie-item:nth-child(1)::before {
  background: linear-gradient(90deg,
      #ff67a8 50%,
      transparent 51%,
      transparent 100%);
}

.pie-item:nth-child(2)::before {
  background: linear-gradient(90deg,
      #6eec9b 50%,
      transparent 51%,
      transparent 100%);
}

.pie-item:nth-child(3)::before {
  background: linear-gradient(90deg,
      #f97b7b 50%,
      transparent 51%,
      transparent 100%);
}

.pie-item:nth-child(4)::before {
  background: linear-gradient(90deg,
      #4ae4f0 50%,
      transparent 51%,
      transparent 100%);
}

.pie-item:nth-child(5)::before {
  background: linear-gradient(90deg,
      #f4aa6a 50%,
      transparent 51%,
      transparent 100%);
}

.pie-item::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  top: 0;
  left: 60px;
  border-radius: 50%;
}
</style>